import { React, useEffect, useState } from "react";
import { Button, Layout, Table } from "antd";
import "./Billing.css";
import { SettingTwoTone } from "@ant-design/icons";
import { ApiService } from "../common/ApiService";
const { Header, Sider, Content } = Layout;
const { Column } = Table;
const headerStyle = {
  color: "#fff",
  height: 114,
  paddingInline: 61,
  lineHeight: "114px",
  backgroundColor: "#141E20",
};
const contentStyle = {
  textAlign: "center",
  color: "#fff",
  backgroundColor: "#141E20",
};
const siderStyle = {
  color: "#fff",
  backgroundColor: "#23363A",
};
const layoutStyle = {
  width: "100%",
  maxWidth: "100%",
};
const Billing = () => {
  const [userData, setUserData] = useState({
    email: "",
    ref_code: "",
    username: "",
  });
  const BillingData = [{date: 'Fd May 23 2025', tranactionType: 'Depost', amount: '2000', payment: 'Crypte'},
    {date: 'Showing 1-1of 1results', tranactionType: '', amount: '', payment: ''}
  ]
  useEffect(() => {}, []);
  return (
    <>
      <Layout style={layoutStyle}>
        <Sider width="403px" style={siderStyle}>
          <div className="menuList">
            <img
              src="../public/images/LOGO1.svg"
              width="238px"
              height="32px"
              onClick={() => {
                location.href = "/";
              }}
            />
            <div className="checkMenu active">
              <img src="../../public/images/arrowhead21.svg" />
              Dashboard
            </div>
            <div
              className="checkMenu"
              onClick={() => {
                location.href = "/ApiKey";
              }}
            >
              <img src="../../public/images/API_N3.svg" />
              Endpoint & API Key
            </div>
            <div
              className="checkMenu"
              onClick={() => {
                location.href = "/Setting";
              }}
            >
              <img src="../../public/images/setting1.svg" />
              Setting
            </div>
          </div>
        </Sider>
        <Layout>
          <Header style={headerStyle}>
            <div className="memberHeader">
              <div className="name">Billing</div>
              <div className="info">
                Balance: <span>$0.00</span> USDC
                <img src="../../public/images/memberRobot.svg" />
                <div className="robotName">U</div>
              </div>
            </div>
          </Header>
          <Content style={contentStyle}>
            <div className="memberMain">
              <div className="billing">
                <div className="title">Transactions Sent</div>
                <div className="desc">
                  View payment history, manage subscriptions, and control your
                  biling preferences.
                </div>
                <div className="memberMoney">
                  <div className="item" style={{ border: "none" }}>
                    <div className="title">$0/Monthy</div>
                  </div>
                  <div className="item">
                    <div className="title">-</div>
                  </div>
                  <div className="item">
                    <div className="title">-</div>
                  </div>
                </div>
                <div className="quick">
                  <div className="title">
                    <div className="btn">
                      <Button
                        style={{
                          fontFamily: "Inter",
                          width: 223,
                          height: 46,
                          borderRadius: "30px",
                          border: "none",
                          backgroundColor: "#141E20",
                          color: "#fff",
                          fontSize: 24,
                        }}
                      >
                        Top Up Balance
                      </Button>
                    </div>
                  </div>
                </div>
                <div className="myplan">
                  <div className="title">Transaction History</div>
                  <div className="plan">
                    <Table
                      pagination={false}
                      dataSource={BillingData}
                      locale={{
                        emptyText: (
                          <div style={{ color: "#ffffff", fontSize: 20 }}>
                            <p>No API keys found</p>
                          </div>
                        ),
                      }}
                      style={{backgroundColor: '#141E20'}}
                    >
                      <Column
                        title="Date"
                        dataIndex="date"
                        key="date"
                        width={500}
                      />
                      <Column
                        title="Tranaction type"
                        dataIndex="tranactionType"
                        key="tranactionType"
                        width={250}
                      />
                      <Column
                        title="Amount"
                        dataIndex="amount"
                        key="amount"
                        width={250}
                      />
                      <Column
                        title="Payment method"
                        dataIndex="payment"
                        key="payment"
                        width={250}
                      />
                    </Table>
                  </div>
                </div>
              </div>
            </div>
          </Content>
        </Layout>
      </Layout>
    </>
  );
};
export default Billing;
